<template>
  <Layout>
      
    <div class="layout sticky-header" id="app">
      <div class="container">
        <div class="hero">
          <h1 class="hero-title">Simplicity. Aesthetics. Value.</h1>
          <h2 class="hero-subtitle">Hi there, I'm an independent Digital Designer &amp; Art Director focused on digital design for brands that like to have fun.</h2>
        </div>
        <div class="projects">
          <div class="projects" v-for="item in $page.projects.edges" :key="item.node.id">
            <div class="project">
              <g-link :to="`/projects/${item.node.id}`" class="project-link">
                <img :alt="item.node.title" :src="`${GRIDSOME_API_URL}${item.node.cover.url}`" width="2560" class="thumbnail g-image g-image--lazy g-image--loaded">
                <h3 class="project-title">{{ item.node.title }}</h3>
                <div class="categories">
                  <span v-for="category in item.node.categories" class="category" :key="category.id">{{ category.title }}</span>
                </div>
              </g-link>
            </div>
          </div>
        </div>
      </div>

      <div>
        <div class="latest-journals-heading container">
          <span class="label">Latest and greatest</span>
        </div>
        <div class="latest-journals">
          <div class="container">
            <g-link v-for="journal in $page.journals.edges" :key="journal.node.id" :to="`/journals/${journal.node.id}`" class="journal">
              <h3 class="journal-title">{{ journal.node.title }}</h3>
            </g-link>
          </div>
        </div>
      </div>
    </div>
      
  </Layout>
</template>
<page-query>
query {
  projects: allStrapiProjects {
    edges {
      node {
        id
        title
        created_at
        cover {
          url
        }
        categories {
          id
          title
        }
      }
    }
  }

  journals: allStrapiJournals {
    edges {
      node {
        id
        title
        content
      }
    }
  }
}
</page-query>
<script>
export default {
  metaInfo: {
    title: "Hello, world!"
  }
};
</script>

<style>
</style>
